<template>
  <div>
    <div class="class_mid">
      <van-nav-bar
        title="课程详情"
        left-text="返回"
        left-arrow
        @click-left="$router.go(-1)"
        style="width:100%"
      />
    </div>
    <div class="feng_img two">
      <img v-show="imgshow"  :src="'http://upenglish.ayvvv.cn'+bigClassDetail.comboimage" alt="">
    </div>
    <div class="detail_xia">
      <div class="detail_title" v-show="imgshow">
        <h3>UP 英语</h3>
      </div>
      <div class="detail_text">
        <div>
          <span></span>
        </div>
        <p v-text="bigClassDetail.comboname"></p>
      </div>
      <van-list
      v-for="item in smallClass"
      :key="item.id"
      v-show="wenzishow"
      >
        <van-cell
        :title="item.classname"
        class="cell"
        @click="jump(item.appurl,item.startime,item.endtime,item.id)"
        >
        <van-popup v-model="show">内容</van-popup>
        <div slot="default" class="time">
          <span class="special">{{ item.isstudy === true ? '已学习' : '未学习' }}</span>
          <span>{{ item.isend === true ? '已过期' : '未过期' }}</span>
          <span style="display:block">开始时间：{{ item.startime | dateFormat }}</span>
          <span style="display:block">结束时间：{{ item.endtime | dateFormat }}</span>
        </div>
        </van-cell>
      </van-list>
      <div v-show="bottomwenzi" class="dxdx">{{intr}}</div>
    </div>
  </div>
</template>

<script>
import { bigClass, outDataClass, learntime } from '@/api/class.js'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      bigClassDetail: [],
      smallClass: [],
      newClass: [],
      show: false,
      oldClass: [],
      imgshow: false,
      wenzishow: false,
      bottomwenzi: false,
      intr: '本课暂无相关小课，请您先看其他课程！'
    }
  },
  prop: {
  },
  created () {
    this.getDetailList()
    this.loadOutDataClass()
    // this.getGilvClass()
  },
  computed: {
    ...mapState(['id'])
  },
  methods: {
    jump (i, starttime, endtime, classid) {
      if (starttime * 1000 > Date.now()) {
        this.$toast.fail('课程尚未开始')
      } else if (endtime * 1000 < Date.now()) {
        this.$toast.fail('课程已结束')
      } else {
        window.location.href = i
        const id = this.$route.params.id
        const { data } = learntime({
          userid: this.id,
          comboid: parseInt(id),
          classid: classid,
          entrytime: Date.now() / 1000,
          exittime: Date.now() / 1000
        })
        console.log(data, '111')
      }
    },
    async getDetailList () {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      const id = this.$route.params.id
      // console.log(id)
      const { data } = await outDataClass({
        comboid: parseInt(id),
        userid: this.id
      })
      console.log(data, '000')
      this.bigClassDetail = data.combo
      this.smallClass = data.class
      if (this.bigClassDetail) {
        this.imgshow = true
      }
      if (this.smallClass.length !== 0) {
        this.wenzishow = true
      } else {
        this.bottomwenzi = true
      }
    },
    async allBigAllClass () {
      const comboid = this.$route.params.id
      // console.log(this.id)
      const { data } = await bigClass({
        comboid: comboid,
        userid: this.id
      })
      // console.log(data)
      if (data.code === 203) {
        this.$toast.fail('此题已被购买')
        this.$router.push('/class')
      } else if (data.code === 200) {
        this.$toast.success('此题已被购买')
      } else {
        this.$toast.fail('购买失败')
      }
    },
    async loadOutDataClass () {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      const Qid = this.$route.params.id
      const { data } = await outDataClass({
        userid: this.id,
        comboid: Qid
      })
      // console.log(data)
      this.oldClass = data.class
      this.newClass = data.learnresult
      this.$toast.clear()
    }
    // async getGilvClass (id) {
    //   const Qid = this.$route.params.id
    //   const { data } = await jilvClass({
    //     userid: this.id,
    //     comboid: Qid,
    //     classid: id,
    //     entrytime:
    //     exittime:
    //   })
    // }
  }
}
</script>

<style scoped lang='less'>
.feng_img {
  img {
    width: 750px;
    height: 500px;
  }
}
.detail_xia {
  padding-top: 10px;
  width: 600px;
  margin: 0 auto;
  .detail_title {
    padding-bottom: 20px;
  }
  .detail_text {
    padding-bottom: 20px;
  }
  .detail_btn {
    position: relative;
    padding-bottom: 20px;
    .van-button {
      width: 180px;
      height: 50px;
    }
  }
  .detail_gou {
    display: inline;
    position: absolute;
    right: 0;
    .van-button {
      width: 230px;
      height: 50px;
    }
  }
  .cell {
    display: flex;
    flex-direction: column;
    background-color: #eee;
    padding: 0;
    border-radius: 20px;
    margin-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 0px 3px 0px #ddd;
  }
}
.time {
  text-align: left;
}
.time span {
  font-size: 14px;
}
.dxdx{
  width: 100%;
  height: 40%;
  text-align: center;
  font-size:18px ;
  margin-top: 20%;

}
</style>
